<!DOCTYPE HTML>
<html>

<head>

    <meta charset="utf-8">
    <title>作品展示-时间管理工具</title>
    <link rel="shortcut icon" href="../../res/logo_main.png" />
    <link href="../public.css" type="text/css" rel="stylesheet" />
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4F46E5',
                        secondary: '#10B981',
                        dark: '#1F2937',
                        light: '#F9FAFB'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            },
            corePlugins: {
                preflight: false,
            }
        }
    </script>
    <link href="product_info_public.css" type="text/css" rel="stylesheet" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
</head>

<body>
    <!-- 通用导航栏 -->
    <nav id="main-nav">
        <!-- logo与标题部分 -->
        <div class="icon-title">
            <a href="../main_page/index.html"><img src="../../res/logo_main.png" height="35px" /></a>
            <a href="../main_page/index.html">
                <h1>个人学习成果展示</h1>
            </a>
        </div>

        <!-- 页面导航部分 -->
        <div class="nav-links">
            <div class="nav-link">
                <a href="../product_show_page/index.html">
                    <img src="../../res/product_icon.png" width="20px" />
                    <span>作品展示</span>
                </a>
                <div class="drop-menu">
                    <a href="../product_show_page/wpg_show.html">Windows进程守护工具</a>
                    <a href="../product_show_page/tomato_cube_show.html">《番茄魔方》时间管理工具</a>
                    <a href="../product_show_page/personal_blog_show.html">个人博客网站</a>
                </div>
            </div>
            <div class="nav-link">
                <a href="../notes_extract_page/index.html">
                    <img src="../../res/note_icon.png" width="20px" />
                    <span>笔记摘选</span>
                </a>
                <div class="drop-menu">
                    <a href="../notes_extract_page/html_note_page.html">HTML篇</a>
                    <a href="../notes_extract_page/css_note_page.html">CSS篇</a>
                    <a
                        href="../notes_extract_page/js_note_page.html">JavaScript篇&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                </div>
            </div>
            <div class="nav-link">
                <a href="../info_links_page/index.html">
                    <img src="../../res/infomation_icon.png" width="20px" />
                    <span>资料链接</span>
                </a>
                <div class="drop-menu">
                    <a href="../info_links_page/c_and_cpp_info_page.html">C/C++</a>
                    <a
                        href="../info_links_page/python_info_page.html">Python&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                    <a href="../info_links_page/web_info_page.html">Web</a>
                </div>
            </div>
            <div class="nav-link">
                <a href="../js_lab_page/index.html">
                    <img src="../../res/lab_lcon.png" width="20px" />
                    <span>JS实验室</span>
                </a>
                <div class="drop-menu">
                    <a
                        href="../js_lab_page/sort_demo_page.html">排序演示&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                    <a href="../js_lab_page/shape_draw_page.html">图形绘制</a>
                    <a href="../js_lab_page/address_list_page.html">通讯录演示</a>
                </div>
            </div>
            <div class="nav-link">
                <a href="../CV_show_page/index.html">
                    <img src="../../res/cv_icon.png" width="20px" />
                    <span>简历查看</span>
                </a>
                <div class="drop-menu">
                    <a
                        href="../CV_show_page/online_view_page.html">在线查看&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                    <a href="../CV_show_page/index.html">简历下载</a>
                    <a href="../CV_show_page/index.html">联系方式</a>
                </div>
            </div>
            <div class="nav-link">
                <a href="../admin_entrance_page/index.html" target="_blank">
                    <img src="../../res/admin_icon.png" width="20px" />
                    <span>管理员入口</span>
                </a>
            </div>
        </div>
        <!-- 时间显示部分 -->
        <div class="time-show">
            <p id="current-date"></p>
            <p id="current-time"></p>
        </div>
        <!-- 注册＆登录部分 -->
        <div class="register-login">
            <button id="registerBtn">注册</button>
            <span>丨</span>
            <button id="loginBtn">登录</button>
        </div>
    </nav>

    <!-- 主页主体部分 -->
    <section class="main-body">
        <!--Banner图 -->
        <div class="banner-box">
            <img src="../../res/banner (6).png" alt="banner图">
            <h1 class="slogan" id="typewriter" style="min-width: 900px;">《番茄魔方》时间管理工具</h1>
        </div>
        <!-- 项目信息 -->
        <div class="product-main" style="width: 100%; justify-items: center;">
            <!-- 项目图示+列表信息 -->
            <h1>项目信息</h1>
            <div class="product-info">
                <div class="product-info-left">
                    <div class="product-imgs">
                        <img src="imgs/主页.png" width="100%" />
                        <img src="imgs/任务页.png" width="100%" />
                        <img src="imgs/数据分析页.png" width="100%" />
                        <img src="imgs/设置页.png" width="100%" />
                    </div>
                </div>
                <div class="product-info-right">
                    <dl>
                        <dd><strong>项目名称：</strong>《番茄魔方》时间管理工具</dd>
                        <dd><strong>更新日期：</strong>2025-04-28</dd>
                        <dd><strong>项目状态：</strong>优化中</dd>
                        <dd><strong>技 术 栈：</strong><span>C#</span><span>WPF</span></dd>
                        <dd><strong>开发工具：</strong>Visual Studio 2022</dd>
                        <dd><strong>项目地址：</strong><a
                                href="https://docs.qq.com/aio/DTXhHcmF4cFdiaWVs?p=5PkhMQNLMYURZMuKOtTPNI"
                                target="_blank">点击查看用户文档</a></dd>
                    </dl>
                </div>
            </div>
            <h1>视频演示</h1>
            <!-- <video width="60%" style="margin:20px 20%;" controls src="imgs/《番茄魔方》宣传.mp4"></video> -->
            <!-- 视频文件较大，本地链接占用内存，改用B站外链 -->
            <iframe width="960px" height="540px" style="margin:20px auto;"
                src="//player.bilibili.com/player.html?isOutside=true&aid=114451432869719&bvid=BV1psVMzLEKF&cid=29794763307&p=1"
                scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>

            <h1>项目说明</h1>
            <p>
                《番茄魔方》是一款基于 Windows 操作系统的高效时间管理工具。它通过结合经典的番茄工作法与实用的待办列表管理、数据分析等功能，从时间与任务两个维度帮助用户合理安排工作和休息时间，提升工作效率。
            </p>
            <p>
                截至目前，《番茄魔方》已完成主要功能的开发与测试，并且在用户交流群中发布了软件的安装程序，有数十位用户安装使用。
            </p>
            <p style="text-indent: 0;">
                <strong>软件特色：</strong>
            </p>
            <ol class="product-list" type="1">
                <li>
                    <strong>软件功能齐全，集成常用服务</strong>
                    <ul>
                        <li>配置番茄钟+任务管理两大辅助工具，从时间和任务两个维度进行高效管理。</li>
                        <li>提供白噪音虚拟环境，有利于减少环境干扰，保持专注并高效地完成任务。</li>
                    </ul>
                </li>

                <li>
                    <strong>界面简约美观，风格统一协调</strong>
                    <ul>
                        <li>采用统一规范的配色和字体，使UI界面整洁有序。</li>
                        <li>使用圆角+阴影样式的卡片式布局，层次感鲜明。</li>
                    </ul>
                </li>

                <li>
                    <strong>操作便捷高效，利于专注效率</strong>
                    <ul>
                        <li>软件设计时尽量不使用弹窗，减少手动关闭负担。</li>
                        <li>主页面信息简明扼要，将详细信息隐藏在次要页面中，便于用户纵览全局。</li>
                        <li>设置页面相关项目直接提供了辅助说明，无需在说明文档中查询，方便用户进行操作。</li>
                    </ul>
                </li>

                <li>
                    <strong>任务列表管理高效，待办工作一目了然</strong>
                    <ul>
                        <li>采用垂直化列表的方式进行任务管理，时间剩余+任务进度双维度把控。</li>
                        <li>任务内容同步到首页，时刻提醒防止遗忘。</li>
                    </ul>
                </li>

                <li>
                    <strong>数据分析简洁明了，AI总结高效直白</strong>
                    <ul>
                        <li>使用热力图、折线图和饼图进行专注数据反馈，内容直白明了。</li>
                        <li>接入腾讯混元大模型进行分析和总结，提供有价值的建议和鼓励。</li>
                    </ul>
                </li>

                <li>
                    <strong>软件轻便易用，快速响应操作</strong>
                    <ul>
                        <li>使用轻量级的SQLite数据库存储数据，能够实现快速地完成数据的读取和写入，同时相较于MySQL、Postgres等大型数据库占用的存储空间更小。</li>
                        <li>软件配备了详细的说明文档和相关信息，能够帮助用户快速了解软件的主要功能和常见问题的解决方案。</li>
                    </ul>
                </li>
            </ol>
        </div>
    </section>

    <!-- 通用页脚 -->
    <footer class="main-footer">
        <!-- 页脚链接列表 -->
        <div class="footer-lists">
            <div class="footer-list">
                <dl>
                    <dt><a href="../product_show_page/index.html">作品展示</a></dt>
                    <dd><a href="../product_show_page/wpg_show.html">Windows进程守护工具</a></dd>
                    <dd><a href="../product_show_page/tomato_cube_show.html">《番茄魔方》时间管理工具</a></dd>
                    <dd><a href="../product_show_page/personal_blog_show.html">个人博客网站</a></dd>
                </dl>
            </div>
            <div class="footer-list">
                <dl>
                    <dt><a href="../notes_extract_page/index.html">笔记摘选</a></dt>
                    <dd><a href="../notes_extract_page/html_note_page.html">HTML篇</a></dd>
                    <dd><a href="../notes_extract_page/css_note_page.html">CSS篇</a></dd>
                    <dd><a href="../notes_extract_page/js_note_page.html">JavaScript篇</a></dd>
                </dl>
            </div>
            <div class="footer-list">
                <dl>
                    <dt><a href="../info_links_page/index.html">资料链接</a></dt>
                    <dd><a href="../info_links_page/c_and_cpp_info_page.html">C/C++</a></dd>
                    <dd><a href="../info_links_page/python_info_page.html">Python</a></dd>
                    <dd><a href="../info_links_page/web_info_page.html">Web</a></dd>
                </dl>
            </div>
            <div class="footer-list">
                <dl>
                    <dt><a href="../js_lab_page/index.html">JS实验室</a></dt>
                    <dd><a href="../js_lab_page/sort_demo_page.html">排序演示</a></dd>
                    <dd><a href="../js_lab_page/shape_draw_page.html">图形绘制</a></dd>
                    <dd><a href="../js_lab_page/address_list_page.html">通讯录演示</a></dd>
                </dl>
            </div>
            <div class="footer-list">
                <dl>
                    <dt><a href="../CV_show_page/index.html">简历查看</a></dt>
                    <dd><a href="../CV_show_page/online_view_page.html">在线查看</a></dd>
                    <dd><a href="../CV_show_page/index.html">简历下载</a></dd>
                    <dd><a href="../CV_show_page/index.html">联系方式</a></dd>
                </dl>
            </div>
        </div>
        <!-- 分割线 -->
        <div class="footer-separation"></div>
        <!-- 其他信息 -->
        <div class="other-info">
            <p style="margin-top: 0;">我的邮箱：h2892197119@foxmail.com</p>
            <span>友情链接：</span>
            <a href="https://blog.morely.top" class="friend-link" target="_blank"><img src="../../res/logo_main.png"
                    width="15px" style="margin:0px 5px 0px 5px;">陌离的个人博客</a>
            <p>本网站仅用于学习展示，部分素材取自网络；<br />如有侵权请联系本人进行删除。</p>
        </div>
    </footer>
    <!-- 版权信息 -->
    <div class="copyright-info">
        Copyright &copy;2025 个人学习成果展示网站
    </div>

    <script type="text/javascript" src="../login_register_window.js"></script>
    <script type="text/javascript" src="../public.js"></script>
    <script type="text/javascript" src="product_info_public.js"></script>
</body>

</html>